import React, { Component } from 'react';
import { Button, Col, Row } from 'antd'
import PropTypes from 'prop-types'
//引入卡片小组件
import Card from './Children/Card/Card'
import Box from './Children/Box/Box'
import EchartsEle from '@/components/Echarts/Echarts'
import './Dashboard.scss'
class Dashboard extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    //绘制图标
    DrawIcon() {
        let icon = [];
        let names = [{
            name: '用户管理',
            path: '',
            icon: <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-f882ba96=""><path fill="currentColor" d="M288 320a224 224 0 1 0 448 0 224 224 0 1 0-448 0zm544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z"></path></svg>
        },
        {
            name: '存储引擎',
            path: '',
            icon: <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-f882ba96=""><path fill="currentColor" d="M598.4 831.872H328.192a256 256 0 0 1-34.496-510.528A352 352 0 1 1 598.4 831.872zm-271.36-64h272.256a288 288 0 1 0-248.512-417.664L335.04 381.44l-34.816 3.584a192 192 0 0 0 26.88 382.848z"></path></svg>
        },
        {
            name: '商品管理',
            path: '',
            icon: <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-f882ba96=""><path fill="currentColor" d="M432 928a48 48 0 1 1 0-96 48 48 0 0 1 0 96zm320 0a48 48 0 1 1 0-96 48 48 0 0 1 0 96zM96 128a32 32 0 0 1 0-64h160a32 32 0 0 1 31.36 25.728L320.64 256H928a32 32 0 0 1 31.296 38.72l-96 448A32 32 0 0 1 832 768H384a32 32 0 0 1-31.36-25.728L229.76 128H96zm314.24 576h395.904l82.304-384H333.44l76.8 384z"></path></svg>
        },
        {
            name: '订单管理',
            path: '',
            icon: <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-f882ba96=""><path fill="currentColor" d="M704 192h160v736H160V192h160v64h384v-64zM288 512h448v-64H288v64zm0 256h448v-64H288v64zm96-576V96h256v96H384z"></path></svg>
        },
        {
            name: '盲盒管理',
            path: '',
            icon: <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-f882ba96=""><path fill="currentColor" d="M317.056 128 128 344.064V896h768V344.064L706.944 128H317.056zm-14.528-64h418.944a32 32 0 0 1 24.064 10.88l206.528 236.096A32 32 0 0 1 960 332.032V928a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V332.032a32 32 0 0 1 7.936-21.12L278.4 75.008A32 32 0 0 1 302.528 64z"></path><path fill="currentColor" d="M64 320h896v64H64z"></path><path fill="currentColor" d="M448 327.872V640h128V327.872L526.08 128h-28.16L448 327.872zM448 64h128l64 256v352a32 32 0 0 1-32 32H416a32 32 0 0 1-32-32V320l64-256z"></path></svg>
        },
        {
            name: '中奖记录',
            path: '',
            icon: <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-f882ba96=""><path fill="currentColor" d="M192 736h640V128H256a64 64 0 0 0-64 64v544zm64-672h608a32 32 0 0 1 32 32v672a32 32 0 0 1-32 32H160l-32 57.536V192A128 128 0 0 1 256 64z"></path><path fill="currentColor" d="M240 800a48 48 0 1 0 0 96h592v-96H240zm0-64h656v160a64 64 0 0 1-64 64H240a112 112 0 0 1 0-224zm144-608v250.88l96-76.8 96 76.8V128H384zm-64-64h320v381.44a32 32 0 0 1-51.968 24.96L480 384l-108.032 86.4A32 32 0 0 1 320 445.44V64z"></path></svg>
        },
        {
            name: '支付设置',
            path: '',
            icon: <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-f882ba96=""><path fill="currentColor" d="M256 640v192h640V384H768v-64h150.976c14.272 0 19.456 1.472 24.64 4.288a29.056 29.056 0 0 1 12.16 12.096c2.752 5.184 4.224 10.368 4.224 24.64v493.952c0 14.272-1.472 19.456-4.288 24.64a29.056 29.056 0 0 1-12.096 12.16c-5.184 2.752-10.368 4.224-24.64 4.224H233.024c-14.272 0-19.456-1.472-24.64-4.288a29.056 29.056 0 0 1-12.16-12.096c-2.688-5.184-4.224-10.368-4.224-24.576V640h64z"></path><path fill="currentColor" d="M768 192H128v448h640V192zm64-22.976v493.952c0 14.272-1.472 19.456-4.288 24.64a29.056 29.056 0 0 1-12.096 12.16c-5.184 2.752-10.368 4.224-24.64 4.224H105.024c-14.272 0-19.456-1.472-24.64-4.288a29.056 29.056 0 0 1-12.16-12.096C65.536 682.432 64 677.248 64 663.04V169.024c0-14.272 1.472-19.456 4.288-24.64a29.056 29.056 0 0 1 12.096-12.16C85.568 129.536 90.752 128 104.96 128h685.952c14.272 0 19.456 1.472 24.64 4.288a29.056 29.056 0 0 1 12.16 12.096c2.752 5.184 4.224 10.368 4.224 24.64z"></path><path fill="currentColor" d="M448 576a160 160 0 1 1 0-320 160 160 0 0 1 0 320zm0-64a96 96 0 1 0 0-192 96 96 0 0 0 0 192z"></path></svg>
        },
        {
            name: '短信设置',
            path: '',
            icon: <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-f882ba96=""><path fill="currentColor" d="M160 826.88 273.536 736H800a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H224a64 64 0 0 0-64 64v570.88zM296 800 147.968 918.4A32 32 0 0 1 96 893.44V256a128 128 0 0 1 128-128h576a128 128 0 0 1 128 128v416a128 128 0 0 1-128 128H296z"></path><path fill="currentColor" d="M352 512h320q32 0 32 32t-32 32H352q-32 0-32-32t32-32zm0-192h320q32 0 32 32t-32 32H352q-32 0-32-32t32-32z"></path></svg>
        }]
        for (let i = 0; i < 8; i++) {
            icon[icon.length] = <Col key={i} className="gutter-row" span={3}><div className='icontab'><i className={['s-icon', `s-icon-${i}`].join(' ')}>{names[i].icon}</i>{names[i].name}</div></Col>
        }
        return icon;
    }
    render() {
        //props
        return (
            <>
                <div className='dashboard'>
                    <Row gutter={[15, 15]}>
                        <Col className="gutter-row" xs={24} sm={12} lg={6}>
                            <Card title='销售额' money={`${0.00}元`} count={0} value={0.00}></Card>
                        </Col>
                        <Col className="gutter-row" xs={24} sm={12} lg={6}>
                            <Card title='盲盒订单量' money={0} count={0} value={0}></Card>
                        </Col>
                        <Col className="gutter-row" xs={24} sm={12} lg={6}>
                            <Card title='订单量' money={0} count={0} value={0}></Card>
                        </Col>
                        <Col className="gutter-row" xs={24} sm={12} lg={6}>
                            <Card title='新增用户' money={`${0}人`} count={0} value={0}></Card>
                        </Col>

                        {
                            this.DrawIcon()
                        }
                    </Row>
                    {/* 报表 */}
                    <Box title='订单' smallTitle='最近15日曲线'>
                        <EchartsEle></EchartsEle>
                        <EchartsEle></EchartsEle>
                    </Box>
                    <Box title='用户' smallTitle='最近15日注册用户数'>
                        <EchartsEle></EchartsEle>
                    </Box>

                </div>
            </>
        );
    }
}

Dashboard.propTypes = {
}

Dashboard.defaultProps = {
}

export default Dashboard;